<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px" class="layout-aside">
      <el-menu
        default-active="1"
        class="layout-menu"
        @select="handleMenuSelect"
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
        :router="true" 
      >

        <el-menu-item index="/home">首页</el-menu-item>

        <el-sub-menu index="/system">
          <template #title>
             <span>系统管理</span>
          </template>
          <el-menu-item index="/system/user">用户管理</el-menu-item>
          <el-menu-item index="/system/role">角色管理</el-menu-item>
          <el-menu-item index="/system/permission">权限管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/guild">
          <template #title>
             <span>协会管理</span>
          </template>
          <el-menu-item index="/guild/association">协会信息</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 右侧主内容区域 -->
    <el-container class="right-container">
      <!-- 头部：面包屑 + 用户信息 -->
      <el-header height="60px" class="layout-header">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="user-info">
          <span>欢迎，管理员</span>
          <el-button type="text" @click="logout">退出</el-button>
        </div>
      </el-header>

      <!-- 主体内容区域 -->
      <el-main class="layout-main">
        <!-- 动态路由出口 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted ,watch} from 'vue'
import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 当前路径的面包屑
const breadcrumbList = ref([])

// 模拟菜单选择跳转
const handleMenuSelect = (index) => {
  const routes = {
    '1-1': '/class-management',
    '1-2': '/student-management',
    '1-3': '/teaching-plan',
    '2-1': '/user-management',
    '2-2': '/role-permission'
  }
  if (routes[index]) {
    router.push(routes[index])
  }
}

// 自动更新面包屑
// 自动更新面包屑
const updateBreadcrumb = () => {
  const matched = route.matched.filter(item => item.name !== 'home')
  // 过滤掉“首页”项
  const list = matched.map(item => item.meta.title || item.name).filter(title => title !== '首页')
  breadcrumbList.value = list
}

onMounted(() => {
  updateBreadcrumb()
})

// 路由变化时更新面包屑
watch(() => route.path, () => {
  updateBreadcrumb()
})

function logout() {
  // 这里可以执行退出逻辑
  router.push('/login')
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.layout-aside {
  background-color: #545c64;
  padding-top: 20px;
}

.layout-menu {
  border-right: none;
}

.right-container {
  flex-direction: column;
}

.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
}

.breadcrumb {
  font-size: 14px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.layout-main {
  padding: 20px;
  background-color: #f9fafb;
}
</style>